<template>
	<view>
		<view class="image"><image src="../../static/img/tao.webp"></image></view>
		<view class="phone">账号登录</view>
			<view class="u-demo-block__content">
						<u-input type="number" v-model="phone" maxlength=11 placeholder="请输入手机号" required color="red" border="bottom"  clearable>
							<u--text
								text="账号"
								slot="prefix"
								type="tips"
							></u--text>
						</u-input>	
						<u-input type="password" v-model="password" class="pass" placeholder="请输入密码" required color="red" border="bottom"  clearable>
							<u--text
								text="密码"
								slot="prefix"
								type="tips"
							></u--text>
						</u-input>	
						<u-button :loading="isLoading" @click="login()" class="button" type="error" text="登录"></u-button>
					</view>
		<view class="no">没有账号？<text @tap="zhuce()" class="zhuce">注册一下</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:"",
				password:"",
				isLoading: false,
				error_message:"",
			}
		},
		methods: {
			zhuce(){
				uni.navigateTo({
					url: "./zhuce"
				})
			},
			login(){
				if(this.phone==''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none',
						duration:2000
					})
				}
				else if(this.phone.length!=11){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none',
						duration:2000
					})
				}else if(this.password==''){
					uni.showToast({
						title:'请输入密码',
						icon:'none',
						duration:2000
					})
				}else{
					uni.request({
						url:'www.movie.com/api/movie_mysql/login.php',
						method:'GET',
						data:{
							phone:this.phone,
							password:this.password
						},
						success: (res) => {
							// this.error_message=res.data;
							// console.log(this.error_message);
							if(res.data==''){
								uni.showToast({
									title:'账号或者密码错误，请重新输入',
									icon:'none',
									duration:2000
								})
								
							}else{
								uni.switchTab({
									url:'./me'
								})
								uni.setStorageSync('phone',this.phone)
							}
						}
					})
				}
			}
		}
	}
</script>

<style>
.image{
	width:100px;
	height:70px;
	margin:0 auto;
	margin-top:30px;
}
.image image{
	width:100%;
	height:100%;
}
.phone{
font-size: 20px;
text-align: center;
color:rgb(253,104,123);
margin-top:10px;
}
.u-demo-block__content{
	width:80%;
	margin:0 auto;
	margin-top:10px;
}
.pass{
	margin-top:20px;
}
.button{
	margin-top:20px;
}
.no{
	text-align: center;
	margin-top:10px;
}
.zhuce{
	color:rgb(245,108,108);
	text-align: center;
}
</style>
